<template>
    <Card>
        <p slot="title">违法人群分布情况</p>
        <div class="chart" id="chart-staff-distribute"></div>
        <Divider />
        <span class="text">执法量最高区划：{{highest}}</span>
        <Spin v-show="loading" fix size="large"></Spin>
    </Card>
</template>

<script>
    export default {
        name: '',
        data() {
            return {
                highest:'暂无数据',
                option:null,
                loading:false,
                districtNames:['个体户','工人','农民','在校学生','无业人员','机关人员']
            }
        },
        methods:{
            renderChart(){
                this.loading = true;
                this.option = {
                    tooltip:{
                        trigger:'item',
                        axisPointer:{type:'shadow'},
                        show:true
                    },
                    legend:{
                        data:this.districtNames,
                        itemWidth:12,
                        itemHeight:12,
                        x:'top',y:'left',
                        orient:'horizontal'
                    },
                    color:this.COLORS.reverse(),
                    series:[{
                        name:'人群分布情况',
                        type:'pie',
                        center:['50%','50%'],
                        radius:['70%','55%'],
                        data:this.districtNames.map(o=>{
                            return {
                                name:o,
                                value:0
                            }
                        }),
                        label:{
                            normal:{
                                formatter:'{b}\n{c}起',
                                position:'outside'
                            }
                        },
                        labelLine:{
                            show:true,
                            length:20,
                            length2:35
                        },
                        itemStyle:{
                            normal:{
                                shadowColor:'#00000030',
                                shadowBlur:25,
                                shadowOffsetX:0,
                                shadowOffsetY:5
                            }
                        }
                    }]
                }
                this.$Crender('chart-staff-distribute',this.option)
                this.loading = false;
            }
        },
        mounted() {
            this.renderChart()
        },
    }
</script>

<style scoped>
    .chart{
        height:410px;
    }
</style>